<template>
  <!-- 
  组件名称: MenuItem
  功能描述: 菜单项组件,用于递归渲染菜单
  业务归属: layout-default 默认布局
   -->

  <!-- 
  菜单列表项
  如果有子菜单,则使用 el-sub-menu 组件
  如果没有子菜单,则使用 el-menu-item 组件
  -->
  <el-sub-menu v-if="item.children" :index="item.url">
    <!-- 菜单标题 -->
    <template #title>
      <el-icon><component :is="item.icon" /> </el-icon>
      <span>{{ item.name }}</span>
    </template>

    <!-- 
    菜单子项
    递归调用自身组件
    再次使用 v-for 循环遍历子菜单
    如果有子菜单,则使用 el-sub-menu 组件
    如果没有子菜单,则使用 el-menu-item 组件
    再把子菜单传递给组件
     -->
    <my-menu v-for="child in item.children" :key="child.url" :item="child"></my-menu>
  </el-sub-menu>

  <!-- 
    没有子菜单的情况
    使用 el-menu-item 组件
    添加点击事件,调用 add 方法,用于添加快捷标签页
   -->
  <el-menu-item
    v-else
    :index="item.url"
    v-show="!(item.name === '订单详情')"
    @click="add(item.name, item.url, item.icon)"
  >
    <el-icon><component :is="item.icon" /></el-icon>
    <span>{{ item.name }}</span>
  </el-menu-item>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
// 导入类型定义（菜单项结构）
import type { MenuItemType } from "@/types/user";

// 引入 pinia 文件 - tabs.ts ,拿到 useTabsStore 快捷页签实例
import { useTabsStore } from "@/store/tabs";


export default defineComponent({
  name: "MyMenu",   // 组件名称（用于调试和递归）
  // 定义组件接收的属性
  props: {
    item: {  // 属性名
      type: Object as PropType<MenuItemType>, // 强制类型转换
      required: true, // 必须传递该属性
    },
  },
  setup() {

    /**
     * 功能作用:菜单点击事件
     * 逻辑描述:点击菜单项后,添加快捷标签页,并设置标签页高亮
     *
     * 声明实例,拿到里面的属性和方法
     * 拿到 tabsStore 实例 里的 addTab 函数, 用于添加新的标签页
     * 拿到 tabsStore 实例 里的 setCurrentTab 函数, 用于设置当前激活的标签页
     * 创建 add 方法,用于添加快捷标签页
     * 调用 addTab 函数,传入 name, url, icon 作为参数,用于添加当前路由对应的标签页
     * 调用 setCurrentTab 函数,传入 name, url 作为参数,用于设置当前高亮的标签页
     * 返回 add 方法
     */
    const tabsStore = useTabsStore();
    const {addTab, setCurrentTab} = tabsStore;
    const add = (name:string, url:string, icon:string) => {
      addTab(name, url, icon);
      setCurrentTab(name, url);
    }

    return {
      add, // 返回 add 方法
    };
  }
});
</script>

<style scoped lang="less">
el-sub-menu__title:hover {
  color: #333 !important;
}
.is-active {
  background: rgb(47 80 157) !important;
  color: #fff !important;
  div {
    background: rgb(47 80 157) !important;
    i {
      color: #fff !important;
    }
    span {
      color: #fff !important;
    }
  }
}
</style>
